<template>
	<view class="content1">
		<uni-popup type="bottom" ref="pickerView" >
			<view class="popup1 flex f-d-c a-i-c">
				<view class="picker-view-box flex f-d-c a-i-c">
					<picker-view class="pick-my" indicator-style="height: 50px;" :value="value" @change="bindChange" indicator-class="color-2567F3">
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in provinces" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in city" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="all-center" style="text-align: center;" v-for="(item, index) in area" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="bottom-btn-box flex a-i-c f-s-30">
					<view class="item all-center btn1" @click="close(false)">
						取消
					</view>
					<view class="item all-center btn2" :style="{background}" @click="close(true)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {mapMutations,mapGetters} from "vuex"
	// import {addressList} from "@/static/js/addressList.js"
	
	export default {
		name:"pickerView",
		props:{
			background:{
				type:String,
				default:"#2567F3"
			},
			isState:{
				type:Boolean,
				default(){
					return false
				}
			}
		},
		data() {
			return {
				provinces:[],
				city:[],
				area:[],
				value:[0,0,0]
			};
		},
		computed:{
			...mapGetters(["addressList"]),
		},
		watch:{
			"$store.state.city":{
				handler(n,o){
					this.city = n
					this.$getArea(n[0].id,2)
				},
				deep:true
			},
			"$store.state.area":{
				handler(n,o){
					this.area = n
				},
				deep:true
			},
		},
		methods:{
			...mapMutations(['changenav_address']),
			bindChange(e){
				let that = this
				let cur = e.detail.value
				if(this.value[0] !== cur[0]){
					that.$getArea(that.provinces[cur[0]].id,1)
				}
				if(this.value[1] !== cur[1]){
					that.$getArea(that.city[cur[1]].id,2)
				}
				this.value = cur
			},
			show(){
				console.log(this.addressList,"addressList")
				this.provinces = this.addressList[0]
				this.city = this.addressList[1]
				this.area = this.addressList[2]
				this.$refs.pickerView.open()
			},
			close(isEnter = false){
				if(isEnter){
					let address = {
						provinces:this.provinces[this.value[0]],
						city:this.city[this.value[1]],
						area:this.area[this.value[2]],
					}
					if(this.isState){
						this.changenav_address(address)
					}else{
						this.$emit("addressBack",address)
					}
				}
				this.$refs.pickerView.close()
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.picker-view-box{
		width: 750upx;
		height: calc(100% - 96upx);
		.pick-my{
			width: 100%;
			height: 100%;
		}
	}
	.bottom-btn-box{
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			color: #FFFFFF;
		}
	}
	.popup1{
		width: 750upx;
		height: 594upx;
		background: #ffffff;
		padding-bottom: 68upx;
		position: relative;
		z-index: 999;
		border-radius: 40upx 40upx 0px 0px;
	}
</style>